<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 项目进度 -->
      <el-col :span="12">
        <el-button type="primary" icon="Search" @click="getProjectBoard">刷新</el-button>
        <el-table v-loading="loading" :data="projectBoardList">
          <el-table-column label="项目名称" align="center" prop="projectName" />
          <el-table-column label="项目进度" align="center" prop="projectName">
            <template #default="scope">
              <span>
                {{ scope.row.taskFinishCount + "/" + scope.row.taskTotalCount }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="耗时" align="center" prop="timeoutState">
            <template #default="scope">
              <span>
                {{ scope.row.useTime }}天
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <!-- 人员信息-->
      <el-col :span="12">
        <div class="user-statistics-container">
          <div class="user-statistics" v-for="item in userStatisticsList" :key="item.project.id">
            <el-card>
              <div class="user-statistics-title">
                <span> {{ item.project.projectName }}</span>
              </div>

              <el-table :data="item.userList">
                <el-table-column label="人员名称" align="center" prop="userName" />
                <el-table-column label="完成任务" align="center" prop="finishTask" />
                <el-table-column label="进度" align="center" prop="totalTask">
                  <template #default="scope">
                    <span>
                      {{ scope.row.finishTask + "/" + scope.row.totalTask }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="花费时间" align="center" prop="useTime">
                  <template #default="scope">
                    <span>
                      {{ scope.row.useTime }}天
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { listProjectInfo, listProjectBoard, userStatistics } from "@/api/task/project";

const projectBoardList = ref([]);
const userStatisticsList = ref([]);
const loading = ref(true);

/** 查询项目信息列表 */
function getProjectBoard() {
  loading.value = true;
  listProjectBoard().then(response => {
    projectBoardList.value = response.data;
    loading.value = false;
  });
  getUserStatistics();
}

/** 查询项目信息列表 */
function getUserStatistics() {
  userStatistics().then(response => {
    userStatisticsList.value = response.data;
  });
}






function showProgress(row) {
  return row.taskFinishCount + "/" + row.taskTotalCount;
}

//
getProjectBoard();
</script>

<style scoped lang="scss">
.bg-purple {
  background: #99a9bf;
}

.bg-purple-light {
  background: #d3dce6;
}

.bg-purple-dark {
  background: #99a9bf;
}

.user-statistics-container {
  overflow-y: auto;
}

.user-statistics {
  margin-bottom: 10px;
}

.user-statistics-title {
  display: flex;
  height: 40px;
  line-height: 40px;
  justify-content: center;
  color: #2b8cdc;
}
</style>
